/**
 * @description  : 人员树选择
 * @descriptionDetail : 人员树选择
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-03 17:23:15
 */
<template>
  <view class="page">
    <theme-navbar :is-white="false" title="人员选择" :isBack="false" style="z-index: 99999">
      <view class="nav-right-icon" @tap="confirm">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view class="header-list">
        <view class="search-lay">
          <u-search v-model="keyword" action-text="确定" @custom="searchData('s')" @clear="searchData('c')"></u-search>
        </view>
        <view class="select-per">
          <view style="flex-shrink: 0;margin-right: 10rpx;">
            <view class="select-title">
              已选择：
            </view>
          </view>
          <view class="select-items">
            <scroll-view :style="{'height':'40px'}" :scroll-x="true">
              <text v-for="item in selectItems" :key="item.id" @click="deleteItem(item)" class="select-item">
                {{ item.name }}
              </text>
            </scroll-view>
          </view>
        </view>
        <u-divider bg-color="#e8e8e8" height="2" half-width="100%"></u-divider>
        <u-tabs :font-size="24" :list="tabList" :is-scroll="true" :show-bar="false" :current="current" @change="change">
        </u-tabs>
        <u-divider bg-color="#e8e8e8" height="5" half-width="100%"></u-divider>
      </view>
      <view id="orgListContainer">
        <u-cell-group>
          <view v-for="(item, idx) in orgItems" :key="idx">
            <u-cell-item :title="item.name" v-if="item.iconSkin == undefined" @tap="handlerItem(item)">
            </u-cell-item>
            <u-cell-item :arrow="false" :title="item.name" v-else @tap="handlerSelect(item)">
              <u-icon
                name="checkbox-mark"
                color="#2979ff"
                size="38"
                v-if="selectIds.includes(item.id)"
                slot="right-icon"
              ></u-icon>
            </u-cell-item>
          </view>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
import commonApi from "@/service/common/common.service";
/** 
	 * 部门选择
	 * 可以限制单选、多选，可选的层级
	 */
export default {
  name: "UserTree",
  props: {
    // 单选或多选, 默认单选
    isSingle: {
      type: Boolean,
      default: false,
    },
    startTime:{
      type: Number,
      default:0,
    }, // 手指按下时间
    treeType: {
      type: String,
      default: "zm-pq", // zm-case
    },
    modelType:{
      type: String,
      default: '',
    },
    defaultOrgUuid:{
      type: String,
      default: '',
    },
    maxCount: {
      type: Number,
      default: 99,
    },
    roleCodes:{
      type: String,
      default: '',
    },
  },
  data() {
    return {
      user: this.$store.state.userInfo.user,
      tabList: [], // 页头滚动内容
      current: 0,
      orgItems: [], // 点击选中的下级部门
      selectIds: [], // 选中的id
      selectItems: [], // 选中的部门
      keyword:"",
    };
  },
  created() {
    // 查询所在部门数据
    this.$modal.showLoading('加载中...');
    commonApi.userTree(undefined, this.treeType, {
      defaultOrgUuid: this.defaultOrgUuid,
      modelType: this.modelType,
      roleCodes: this.roleCodes,
    }).then(dr => {
      this.$modal.hideLoading();
      if (dr.success) {
        let orgs = dr.data || [];
        if(orgs.length == 1){
          this.tabList = [];
          this.tabList.push(orgs[0]);
          this.orgItems = orgs[0].children || [];
        }else{
          this.orgItems = this.orgs;
        }
      }
    }).catch(e => {
      this.$modal.hideLoading();
      console.log(e);
    });
  },
  mounted() {},
  methods: {
    searchData(type){
      this.$modal.showLoading('加载中...');
      let ob = {
        defaultOrgUuid: this.defaultOrgUuid,
        modelType: this.modelType,
        roleCodes: this.roleCodes,
      };
      if(type == 's') ob.keyWord = this.keyword;
      commonApi.userTree(undefined, this.treeType, ob).then(dr => {
        this.$modal.hideLoading();
        if (dr.success) {
          this.current = 0;
          let orgs = dr.data || [];
          if(orgs.length == 1){
            this.tabList = [];
            this.tabList.push(orgs[0]);
            this.orgItems = orgs[0].children || [];
          }else{
            this.orgItems = this.orgs;
          }
        }
      }).catch(e => {
        this.$modal.hideLoading();
        console.log(e);
      });
    },
    // 删除选中成员
    deleteItem(item){
      this.handlerSelect(item);
    },
    // 切换选中项
    change(index) {
      this.current = index;
      this.orgItems = this.tabList[index].children;
      this.tabList = this.tabList.slice(0, index + 1);
    },
    // 点击选中项
    handlerItem(orgItem) {
      this.tabList.push(orgItem);
      this.current = this.tabList.length - 1;
      if (orgItem.children) {
        this.orgItems = orgItem.children;
      } else {
        this.orgItems = [];
      }
    },
    // 点击根节点
    handlerSelect(orgItem) {
      if (this.isSingle) { // 单选
        this.selectItems = [];
        this.selectIds = [];
        this.selectItems.push(orgItem);
        this.selectIds.push(orgItem.id);
      } else { // 多选
        let sItems = this.selectItems.filter(s => s.id == orgItem.id);
        if (sItems.length > 0) {
          this.selectItems = this.selectItems.filter(s => s.id != orgItem.id);
          this.selectIds = this.selectIds.filter(i => i != orgItem.id);
        } else {
          this.selectItems.push(orgItem);
          this.selectIds.push(orgItem.id);
        }
      }
    },
    // 点击确定
    confirm() {
      this.$emit("choose", this.selectItems);
    },
  },
};
</script>

<style lang="scss" scoped>
	.search-lay{
		padding: $cm_conent_padding_column $cm_content_paddng_row;
	}
	.header-list {
		position: fixed;
		top: 44px;
		left: 0px;
		width: 100%;
		z-index: 999;
    .select-per{
      display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
      background-color: #FFF;
      .select-title{
        // width: 90px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        transition-duration: 0.5s;
        // padding: 0px 15px;
        padding-left: 15px;
        color: rgb(41, 121, 255);
        font-weight: bold;
      }
      .select-items{
		flex: 1;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        white-space: nowrap;
        .select-item{
          padding-right: 15px;
        }
      }
    }
	}

	#orgListContainer {
		margin-top: 154px;
	}

	.nav-right-icon {
		padding-right: 15px;
		color: #FFF;
	}

	/deep/ .u-tab-item {
		max-width: 160px;
	}
</style>
